<template>
    <div id="my">
        <div class="content">
            <img :src="mine" alt="" class="mine">
            <div class="base-info">
                <div class="head-img">
                    <img :src="info.headimg" alt="">
                </div>
                <div class="info-detail" v-if="isLogin">
                    <p class="name">{{info.nickname}}</p>
                    <p class="time" v-if="info.res==0&&info.expire!=0">到期时间：{{info.expire|formatDate(2)}}<router-link to="/task/pay" tag="span">续期</router-link></p>
                    <p class="time" v-if="info.res==1&&info.expire!=0">已过期<router-link to="/task/pay" tag="span">续期</router-link></p>
                    <p class="time" v-if="info.vip==2&&info.expire==0">到期时间：永久<router-link to="/task/pay" tag="span">续期</router-link></p>
                </div>
                <div class="info-detail" v-if="!isLogin">
                    <p class="toLogin" @click="ToLogin">去登录</p>
                </div>
            </div>

            <div class="menu-list">
                <div  class="list-item" @click="tologin('/task/pay')">
                    <p>
                        <img :src="dyfw" alt="">订阅服务
                    </p>
                    <p>
                        &nbsp;<img :src="more" alt="">
                    </p>
                </div>

                <div class="list-item" @click="tologin('/my/integral')">
                    <p>
                        <img :src="wdjf" alt="">我的积分
                    </p>
                    <p>
                        <span><font color="#14A365">{{defaultIntegral}}</font>ABNB</span><img :src="more" alt="">
                    </p>
                </div>


                <div class="list-item" @click="tologin('/task/share')">
                    <p>
                        <img :src="yqhy" alt="">邀请好友
                    </p>
                    <p>
                        &nbsp;<img :src="more" alt="">
                    </p>
                </div>

                <router-link tag="div" to="/my/contact" class="list-item">
                    <p>
                        <img :src="lxkf" alt="">联系客服
                    </p>
                    <p>
                        &nbsp;<img :src="more" alt="">
                    </p>
                </router-link>

            </div>
            <p class="loginOut" @click="loginOut" v-if="isLogin">退出登录</p>

        </div>
    </div>
</template>

<script>

    import Head from "@/assets/img/img_defult_tx.png"
    import mine from "@/assets/img/img_mine.png"
    import dyfw from "@/assets/img/icon_mine_dyfw.png"
    import wdjf from "@/assets/img/icon_mine_wdjf.png"
    import yqhy from "@/assets/img/icon_mine_yqhy.png"
    import lxkf from "@/assets/img/icon_mine_service.png"
    import more from "@/assets/img/icon_getmore.png"



    export default {
        name: "Index",
        data(){
            return {
                mine:mine,
                dyfw:dyfw,
                more:more,
                wdjf:wdjf,
                yqhy:yqhy,
                lxkf:lxkf,
                defaultIntegral:0,
                info:{
                    headimg:Head
                },
                isLogin:false,
                token:this.getCookie("token")

            }
        },
        mounted() {
            if(this.token == null||this.token == ''){
                this.isLogin = false
                this.token = ''
            }else{
                this.isLogin = true
                this. getInfo()
                this. getIntegral()
            }
        },
        methods:{
            ToLogin(){
                this.$router.push({name:'login'})
            },
            getInfo(){
                this.$api.my.getInfo(this.getCookie('token')).then(res=> {
                    // 执行某些操作
                        this.info = res.data.data
                })
            },
            getIntegral(){
                this.$api.my.getIntegral(this.getCookie('token')).then(res=> {
                    // 执行某些操作
                    this.defaultIntegral = res.data.data
                })

            },
            loginOut(){
                this.delCookie('token')
                this.setCookie('status',false)
                this.isLogin = false

                this.$toast({
                    message: '退出登录',
                    duration: 1000,
                    forbidClick: true
                })
            }
        }
    }
</script>

<style scoped>
    #my{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background:url("../../assets/img/bg_mine.png")no-repeat;
        background-size: 100% 8rem;
        background-position: top;
    }
    .content{
        margin: 6rem auto;
        padding: 0 1rem;
        position: relative;
    }
    .base-info{
        width:100%;
        height:6.38rem;
        background:rgba(255,255,255,1);
        border-radius:0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
    }
    .head-img{
        width: 4rem;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .head-img img{
        object-fit: cover;
        width: 3.13rem;
    }
    .info-detail{
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        height: 100%;
    }
    .info-detail p{
        width: 100%;
        text-align: left;
        justify-content: space-between;
        align-items: center;
        display: flex;
    }
    .info-detail .name{
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
    }
    .info-detail .time{
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
    }
    .info-detail .time span{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width:3.06rem;
        height:1.5rem;
        background:rgba(20,163,101,1);
        border-radius:0.2rem;
        font-size:0.81rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
    }
    .mine{
        position: absolute;
        right: 0;
        top: -5rem;
        width: 9rem;
    }
    .menu-list{

        background:rgba(255,255,255,1);
        border-radius:0.5rem;
        padding: 0 1rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 1rem;
    }
    .list-item{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 4rem;
        border-bottom: 1px solid #EEEEEE;
    }
    .list-item:last-child{
        border: none;
    }
    .list-item p{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 30%;
        font-size:1rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
    }
    .list-item p:first-child img{
        width: 1.25rem;
    }
    .list-item p:last-child img{
        width: 0.44rem;
    }
    .list-item p:last-child{
        width: auto;
        min-width: 22%;

    }
    .list-item p:last-child span{
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:#999;
    }
    .loginOut{
        width:18.75rem;
        height:2.5rem;
        background:rgba(202,230,218,1);
        border-radius:0.5rem;
        margin: 3rem auto;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(20,163,101,1);
    }
    .info-detail .toLogin{
        width:4.38rem;
        height:1.75rem;
        background:rgba(20,163,101,1);
        border-radius:0.1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
    }
</style>